<template>
  <div class="app-container">
    <el-card>
      <el-container>
        <el-aside width="200px" class="aside-container">
          <el-tree :indent="0" :default-expanded-keys="[0,1]" :data="dclasses" :props="defaultProps" @node-click="handleNodeClick" />
        </el-aside>
        <el-main class="el-main-intelirri">
          <main-header @search="search" @exportData="exportData" />
          <el-tabs v-model="activeName" type="card">
            <el-tab-pane label="趋势图展示" name="first">
              <div v-if="activeName === 'first' && trends.rows" class="trend-container">
                <ve-line
                  :data="trends"
                  :height="height"
                  :extend="chartExtend"
                />
              </div>
              <div v-else class="trend-container empty-container">
                <el-empty description="暂无任何数据" />
              </div>
            </el-tab-pane>
            <el-tab-pane label="列表信息展示" name="second">
              <list :results="results" />
            </el-tab-pane>
          </el-tabs>
        </el-main>
      </el-container>
    </el-card>
  </div>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog'
import MainHeader from './component/main-header'
import List from './component/list'
import CommonMixin from '@/mixin/CommonMixin'
import { getHistory } from '@/api/statistics'
import { dclassCodeMap } from '@/utils/constant'
import { getDclasses } from '@/utils/device'
import { mapGetters } from 'vuex'
export default {
  components: {
    MainHeader,
    List
  },
  directives: { elDragDialog },
  mixins: [CommonMixin],
  data() {
    return {
      activeName: 'first',
      height: 'calc(100vh - 224px)',
      results: {},
      trends: {},
      dclasses: [],
      defaultProps: {
        children: 'data',
        label: 'name'
      },
      serialno: '',
      searchData: {},
      chartExtend: {
        series: {
          showSymbol: false
        },
        grid: {
          left: '2%',
          right: '2%',
          bottom: '2%',
          top: '12%',
          containLabel: true
        }
      }
    }
  },
  computed: {
    ...mapGetters(['devices'])
  },
  watch: {
    devices: {
      handler(newVal, oldVal) {
        this.formatDevices(newVal)
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    formatDevices(devices) {
      this.dclasses = getDclasses(devices).filter(val => {
        return ![dclassCodeMap.fm, dclassCodeMap.fkq, dclassCodeMap.zypz, dclassCodeMap.db, dclassCodeMap.wg].includes(+val.dclass)
      })
      this.serialno = this.dclasses[0]['data'][0]['serialno']
      this.getHistory()
    },
    getHistory() {
      Object.assign(this.searchData, { serialno: this.serialno })
      getHistory(this.searchData).then(res => {
        this.results = res.data
        this.trends = res.data.trends
      })
    },
    search(searchData) {
      this.searchData = searchData
      this.getHistory()
    },
    exportData() {
      console.log('exportData')
    },
    handleNodeClick(e) {
      if (e.serialno) {
        this.serialno = e.serialno
        this.getHistory()
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
